·
<!-- 订单详情 -->
<template>

	<view class="order-detail-wrap">
		<view v-if="orderDetail.status === 0&&(overTimeM>0||overTimeS>0)" style="padding: 20rpx 20rpx 0">剩余{{ overTimeM }} : {{ overTimeS }}订单自动关闭</view>

		<view class="order-wrap">

			<!-- 商品信息 -->
			<view style="padding: 10px;border-bottom: 1px solid #F3F3F3;display: flex;">
				<view style="position: relative;">
					<image :src="'https://oss.bigchun.com' + orderDetail.goods.image"
						style="width: 260rpx;height: 194rpx;border-radius: 8rpx;"></image>
				</view>
				<view>
					<view style="margin-left: 10px;">
						<view style="font-size: 32rpx;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #333333;line-height: 50rpx;    white-space: nowrap;
				overflow: hidden;width: 400rpx;text-overflow: ellipsis;">{{orderDetail.goods.title}}
							<text>：{{orderDetail.amount}}</text>
						</view>
						<view
							style="font-size: 20rpx;line-height: 60rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-top: 4px;">
							{{orderDetail.goods.subtitle}}
						</view>
						<!-- <view>
							<text
								style="font-weight: bold;color: #FE7F1A;font-size: 24rpx;">会员价￥：{{orderDetail.goods.vip_price}}</text>
							<text
								style="text-decoration:line-through;font-weight: 500;color: #999999;font-size: 24rpx;">￥{{orderDetail.goods.original_price}}</text>
						</view> -->
					</view>
				</view>
			</view>



			<!-- 价格信息 -->
			<view class="order-row-box order-price-box" v-if="orderDetail.id">
				<view class="item">
					<text class="title">商品总价</text>
					<text class="detail">￥{{ orderDetail.amount }}</text>
				</view>

				<!-- <view class="item" v-if="orderDetail.discount_fee>0">
					<text class="title">优惠金额</text>
					<text class="detail">-￥{{ orderDetail.discount_fee }}</text>
				</view>
				<view class="item" v-if="orderDetail.score_fee">
					<text class="title">积分</text>
					<text class="detail">-{{ orderDetail.score_fee }}积分</text>
				</view> -->
				<view class="item">
					<text class="title">实际支付：</text>
					<text class="detail price">￥{{ orderDetail.cash_money }}</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-row-box">
				<view class="item">
					<text class="title">订单编号：</text>
					<text class="detail order_sn" @tap="onCopy(orderDetail.order_sn)">{{ orderDetail.order_sn }}</text>
				</view>
				<view class="item">
					<text class="title">下单时间：</text>
					<text class="detail create_time">{{ orderDetail.createtime }}</text>
				</view>
				<!-- <view class="item" v-if="orderDetail.status > 0">
					<text class="title">支付方式：</text>
					<text class="detail">{{ payType[orderDetail.pay_type] }}</text>
				</view>
				<view class="item" v-if="orderDetail.status > 0">
					<text class="title">支付时间：</text>
					<text class="detail">{{ orderDetail.paytime }}</text>
				</view> -->
			</view>
			<view style="min-height: 640rpx;margin: 40rpx auto;display:flex;justify-content: center;"  v-if="orderDetail.status === 1">
<!--				<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300" />-->
        <image :src="orderDetail.poster" mode="widthFix" style="width: 200px;height: 200px;"></image>
			</view>
		</view>


		<!-- 底部按钮 -->
		<view class="foot-wrap safe-area-inset-bottom">
			<button @tap.stop="onCancel(orderDetail.id)" v-if="orderDetail.status === 0"
				class="u-reset-button obtn">取消订单</button>
			<button @tap.stop="toPay()" v-if="orderDetail.status === 0"
				class="u-reset-button obtn obtn3">付款</button>
			<button @tap.stop="onAftersale(orderDetail.id)"
				v-if="orderDetail.status !==0 &&orderDetail.status !==-1 && !orderDetail.aftersale_status"class="u-reset-button obtn">
				申请退款
			</button>
			<button @tap.stop="showAftersale(orderDetail.aftersale_status)"
				v-if="orderDetail.status !==0 &&orderDetail.status !==-1 && orderDetail.aftersale_status"class="u-reset-button obtn">
				查看进度
			</button>
			<button @tap.stop="onComment(orderDetail.id)"
				v-if="orderDetail.status ===2 && orderDetail.is_comment===0" class="u-reset-button obtn obtn3">
				待评价
			</button>
			<button @tap.stop="onComment(orderDetail.id, true)"
				v-if="orderDetail.status ===2 && orderDetail.is_comment===1" class="u-reset-button obtn obtn3">
				查看评价
			</button>
      <button  v-if="orderDetail.status === -1"
              class="u-reset-button obtn">订单已取消</button>
		</view>
	</view>
</template>

<script>
	import https from '@/shopro/requests/index'
	import ayQrcode from '@/shopro/ay-qrcode/ay-qrcode.vue'
	export default {
		components: {ayQrcode},
		data() {
			return {
				//二维码相关参数
				modal_qr: false,
				url: '', // 要生成的二维码值
				time: 0,
				overTimeM: 0,
				overTimeS: 0,
				orderDetail: {},
				orderStatus: {
					'-2': '已关闭',
					'-1': '已取消',
					'0': '未付款',
					'1': '已付款',
					'2': '已完成'
				},
				payType: {
          gouwujin: '余额支付',
					wallet: '余额支付',
					wechat: '微信支付',
					alipay: '支付宝支付',
					iospay: 'ApplePay'
				},
				expressType: {
					express: '物流快递',
					selfetch: '到店/自提',
					store: '商家配送',
					autosend: '自动发货'
				}
			};
		},
		onShow() {
			this.getOrderDetail();
		},
		onLoad(option) {
			console.log(option)
			// this.showQrcode();//一加载生成二维码


		},
		filters: {
			phoneFilter(val) {
				let reg = /^(.{3}).*(.{4})$/
				return val.replace(reg, '$1****$2')
			}
		},
		computed: {
			allNum() {
				if (this.orderDetail.item) {
					let items = this.orderDetail.item;
					let allPrice = 0;
					items.forEach(p => {
						allPrice += p.goods_num;
					});
					return allPrice;
				}
			}
		},
		methods: {
			// 展示二维码
						showQrcode() {
							this.url = "https://duomi.bigchun.com/api/order/detail?order_id=" + this.$Route.query.id
							console.log(this.url)
							let _this = this;
							this.modal_qr = true;
							// uni.showLoading()
							setTimeout(function() {
								// uni.hideLoading()
								_this.$refs.qrcode.crtQrCode()
							}, 50)
						},

						//传入组件的方法
						hideQrcode() {
							this.modal_qr = false;
						},

			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 订单详情
			async getOrderDetail() {
				let that = this;
				https('common.cate_detail', {
					order_id: that.$Route.query.id,
					user_type:2,
				}).then(res => {
					if (res.code === 1) {
						that.orderDetail = res.data;
						const now = Date.parse(new Date()) / 1000;

						let time = (res.data.createtime + 1800) - now;
						setInterval(function() {
							time = time - 1;
							that.overTimeM = parseInt(time / 60);
							that.overTimeS = parseInt(time % 60);
						}, 1000);

						that.orderDetail.createtime = that.$u.timeFormat(res.data.createtime, 'yyyy-mm-dd hh:MM');
						that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime, 'yyyy-mm-dd hh:MM');

						// uni.setNavigationBarTitle({
						// 	title: that.orderDetail.status_desc || '订单详情'
						// });

					}
				});
			},
			// 复制
			onCopy(code) {
				let that = this;
				uni.setClipboardData({
					data: code,
					success: function(data) {
						that.$u.toast('已复制到剪切板');
					}
				});
			},
			showAftersale(stauts){
				let content = ""
				if(stauts === 1){
					content = '审核中'
				}else if(stauts === 2){
					content = '退款成功'
				}else if(stauts === -1){
					content = '拒绝退款'
				}
				uni.showModal({
					title: '退款详情',
					content: content,
					success: res => {}
				})
			},


//取消售后
		onAfterSale(aftersaleId) {
			let that = this;
			uni.showModal({
				title: '退款确认',
				content: '是否确定申请退款？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						https(
							'common.cate_afterSales',
							{
								order_id: aftersaleId
							},
							'加载中...'
						).then(res => {
							if (res.code === 1) {
								uni.showModal({
								    title: '退款提示',
								    content: '退款正在审核，请等待',
								    success: function (res) {
								       that.getOrderDetail()
								    }
								});
							}
						});
					}
				}
			});
		},
			// 取消订单
			onCancel(id) {
				let that = this;
				uni.showModal({
					title: '取消确认',
					content: '是否确定取消该订单？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							https('common.cate_cancel', {
									order_id: id
								},
								'取消中...'
							).then(res => {
								if (res.code === 1) {
									that.$Router.back();
								}
							});
						}
					}
				});
			},

			// 立即购买
			toPay() {
				var that = this;
				https('common.cate_order', {
					cash_money: that.orderDetail.cash_money,
					goods_id: that.orderDetail.id,
					store_shop_id: that.orderDetail.store_shop_id,
					goods_num: 1
				}, '加载中...').then(res => {
					if (res.code === 1) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (payRes) => {
								// uni.navigateTo({
								// 	url: './success'
								// })
								uni.showToast({
									title: "支付成功",
									icon: "success"
								})
								uni.navigateBack({
									delta: 1
								})
							},
							fail: () => {
								this.$u.toast('支付失败，请重试')
							}
						})

					}
				});
			},

			// 评价
			onComment(orderId, isComment) {
				this.jump('/pages/order/cate/add-comment', {
					orderId: orderId,
					isComment:isComment
				});
			},

		}
	};
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
	.address-wrap {
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx 24rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			.address-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ico {}

				.intro {
					margin-left: 20rpx;

					.address-user {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 44rpx;
						padding-bottom: 16rpx;

						.address-username {}

						.address-phone {
							margin-left: 20rpx;
						}
					}

					.address-detail {
						width: 522rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 32rpx;
						padding-bottom: 16rpx;
					}
				}
			}
		}

		.right {}
	}

	.order-wrap {
		background-color: #fff;
		padding: 40rpx 20rpx;
		margin: 20rpx 24rpx;
		border-radius: 16rpx;

		.order-list {
			.order-card {
				padding: 0 20rpx;
				margin-bottom: 8rpx;
				display: flex;

				.goods_img {
					width: 200rpx;
					height: 150rpx;
					border-radius: 16rpx;
					margin-right: 20rpx;
				}

				.goods-intro {
					flex-grow: 1;

					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.goods-title {
							font-weight: 500;
							color: #333333;
							font-size: 32rpx;
							width: 258rpx;
						}

						.goods-price {
							font-weight: bold;
							color: #333333;
							font-size: 28rpx;
						}

						.goods_sku,
						.goods-num {
							font-weight: 400;
							color: #777777;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.order-row-box {
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				color: #333333;

				.title {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.detail {
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
				}

				.price {
					color: #FC5351;
				}

				.order_sn,
				.create_time {
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.order-price-box {
			border-bottom: 1rpx solid #F3F3F3;
			padding: 20rpx 0;
		}
	}

	.foot-wrap {
		width: 100%;
		height: 100rpx;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		button {
			margin: 0 20rpx 0 0;
			padding: 0;
		}

		.obtn {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: #FFFFFF;
			border-radius: 108rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			border: 1rpx solid #999999;
		}

		.obtn3 {
			color: #FC5351;
			border: 1rpx solid #FC5351;
		}
	}


	// 配送方式
	.express-type-box {
		height: 90rpx;
		background: rgba(247, 247, 247, 1);
		border-radius: 10rpx;
		padding: 0 20rpx;

		.express-type--title {
			font-size: 28rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.express-type--content {
			font-size: 26rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.express-type--detail {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 30rpx;
		}
	}

	.refund_msg {
		font-size: 28rpx;
		color: #999;
		flex: 1;
		text-align: left;
	}

	.order-bottom {
		background: #fff;
		justify-content: flex-end;
		padding: 20rpx 0;

		.btn1 {
			width: 160rpx;
			line-height: 64rpx;
			border: 1rpx solid rgba(223, 223, 223, 1);
			border-radius: 108rpx;
			font-size: 28rpx;
			background: #fff;
			padding: 0;
			margin-left: 20rpx;
		}

		.btn2 {
			width: 160rpx;
			line-height: 64rpx;
			border: 1rpx solid #FC5351 !important;
			border-radius: 108rpx;
			font-size: 28rpx;
			color: #FC5351 !important;
			padding: 0;
			background: #fff;
			margin-left: 20rpx;
		}
	}
</style>
